<style scoped>
    .title, .author,.content{
        margin: 10px
    }
</style>
<template>
    <div>
        <!-- 查询区域 -->
        <Row>
            <div style="float:left;margin:3px"  >
                <Button @click="btn_refresh">刷新</Button>
            </div>
            <div style="float:left;margin:3px"  >
                <Button @click="btn_create" v-has="'add_post'">写笔记</Button>
            </div>
            <!-- 查询区域 -->
            <div style="margin-top:3px;">
                <div style="width:200px; float:left;">
                    <Form ref="select">
                        <Form-Item  prop="selectContent" >
                            <Input v-model="selectContent" placeholder="输入查询内容" @on-change="btn_select_post"/>
                        </Form-Item>
                    </Form> 
                </div>
                <div>
                    <Button type="primary" style="margin:3px;"  @click="btn_select_post">查询</Button>
                </div>
            </div>
        </Row>
        <!-- 列表区域 -->
        <i-table border stripe :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                    <Button type="error" size="default"  @click="del_post(index)" v-has="'delete_post'">删除</Button>
            </template>
        </i-table >
        <!-- 分页区域 -->
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>

<script>
import { post } from '@/api/http'
import { blog_list,blog_delete,blog_select } from  '@/api'
import { show_simple_page } from '@/common/util' 

export default {
    data() {
        return {
            format: [
                {
                    title: '文章标题',key: 'title',
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: 'blue'
                                },
                                on: {
                                    click: ()=>{                    
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.title)
                        ])
                    }
                },
                {
                    title: '文章内容', key: 'content',width:700,
                    render: (h, params) => {
                        // bug content为空slice会报错
                        let texts = '';
                        if(params.row.content == null){
                            texts = null
                        }else{
                            texts = params.row.content.slice(0,50)
                        }
                        return h('div',{style:{'overflow':'auto',}}, [
                            h('p', texts)
                        ]);
                    }
                },
                {
                    title: '文章用户',key: 'user',
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',align: 'center',width: 100,
                }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 30,

            // 查询
            selectContent:'',
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        btn_create(){
            this.$router.push({name: 'postAdd'})
        },
        btn_select_post(){
            let selectContent = this.selectContent
            if(selectContent =='' || selectContent==null) {
                this.refresh()
                return
            }
            let data = {"selectContent":selectContent}
            post(blog_select,data).then(response=>{
                show_simple_page(this,response)
            })

        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        handleLink(params){
            // this.$router.push({name: 'postDetail',query: {id: params.row.id}})
            // console.log(params.row.id)
            const { href } = this.$router.resolve({
                path: '/postDetail'
            });
            window.open(href+"?id="+params.row.id, '_blank');
        },
        del_post(index){
            let id = this.show_list[index].id
            let title = this.show_list[index].title
            let result = confirm("确定要删除<"+title+">吗?")
            if(result == false) return 
            let data = {"id":id}
            post(blog_delete,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除文章成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        refresh() {
            post(blog_list).then(response=>{
                show_simple_page(this,response)
            })
            
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
